import React, { Component } from 'react'
import { connect } from 'react-redux'
import {bindActionCreators} from 'redux'
import * as todoActions from '../store/actions/todo.actions'
import { getIn } from 'immutable'

class Footer extends Component {

  clearTodo  = () => {
    if (window.confirm('确定删除?')) {
      this.props.clear_todo_completed()
    }
  }

  render() {
    console.log(this.props)
    let leftLists = this.props.todos.filter(todo => todo.isCompleted === 0)
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{leftLists.length}</strong> item left
        </span>
        <ul className="filters">
          <li>
            <span onClick={() => {this.props.motify_filter_todo('all')}}>All</span>
          </li>
          <li>
            <span onClick={() => {this.props.motify_filter_todo('Active')}}>Active</span>
          </li>
          <li>
            <span onClick={() => {this.props.motify_filter_todo('Completed')}}>Completed</span>
          </li>
        </ul>
        <button className="clear-completed" onClick={this.clearTodo}>Clear completed</button>
      </footer>
    );
  }
}

// 获取store中的数据
const mapStateToProps = ( state ) => {
  return {
    todos: getIn(state.todoReducer, ['todos'])
  }
}

// 处理dispatch函数
const mapActionToProps = (dispatch) => {
  return {
    ...bindActionCreators(todoActions, dispatch)
  }
}

export default connect(mapStateToProps, mapActionToProps)(Footer);
